<template>
  <VFormDesigner
    :designer-config="designerConfig"
    :field-list-data="fieldListData"
    :global-dsv="globalDsv"
    @field-widget-used="handleFWU"
    @field-widget-removed="handleFWR"
    @form-json-updated="handleFJU"
    ref="desForm">
  </VFormDesigner>
</template>

<script>
import VFormDesigner from '@/components/form-designer/index.vue'

export default {
  name: 'DesignerApp',
  components: {
    VFormDesigner,
  },
  data() {
    return {
      fieldListData: {},
      designerConfig: {
        languageMenu: true,  //是否显示语言切换菜单
        externalLink: false,  //是否显示GitHub、文档等外部链接
        formTemplates: true,  //是否显示表单模板
        componentLib: true,  //是否显示组件库
        chartLib: false,  //是否显示图表库
        metadataLib: false,  //是否显示元数据
        layoutTypeButton: false,  //是否显示表单布局适配按钮组
        eventCollapse: true,  //是否显示组件事件属性折叠面板
        widgetNameReadonly: false,  //禁止修改组件名称

        clearDesignerButton: true,  //是否显示清空设计器按钮
        previewFormButton: true,  //是否显示预览表单按钮
        importJsonButton: true,  //是否显示导入JSON按钮
        exportJsonButton: true,  //是否显示导出JSON器按钮
        exportCodeButton: false,  //是否显示导出代码按钮
        generateSFCButton: false,  //是否显示生成SFC按钮
        saveButton: true,  //是否显示保存按钮
        logoHeader: false,  //是否显示Logo头部区域（仅Pro）

        toolbarMaxWidth: 'auto',  //设计器工具按钮栏最大宽度（单位像素）
        toolbarMinWidth: 300,  //设计器工具按钮栏最小宽度（单位像素）

        productName: '',  //自定义表单设计器名称，对应"VForm Pro"（仅Pro）
        productTitle: '',  //自定义表单设计器标题，对应"表单设计器"（仅Pro）

        presetCssCode: '',  //设计器预设CSS样式代码
        languageName: 'zh-CN',  //界面语言，默认显示中文

        resetFormJson: false,  //是否在设计器初始化时将表单内容重置为空
      },

      //全局数据源变量
      globalDsv: {
        testApiHost: 'http://www.test.com/api',
      },
    }
  },
  created() {
    console.log('designer created')
  },
  mounted() {
    console.log('designer mounted')
  },
  methods: {
    handleFWU(fwName) {
      console.info(fwName)
    },

    handleFWR(fwName) {
      console.info(fwName)
    },

    handleFJU(reason) {
      console.warn('form json updated...', reason)
      // 保存表单配置和组件列表到localStorage，供渲染器使用
      // window.localStorage.setItem('widget__list__backup', JSON.stringify(this.$refs.desForm.getWidgetList()))
      // window.localStorage.setItem('form__config__backup', JSON.stringify(this.$refs.desForm.getFormConfig()))
    },
  },
}
</script>

<style lang="scss">

</style>
